import React, { useEffect, useState } from "react";
import {
    Breadcrumb,
    Card,
    Form,
    Input,
    Row,
    Col,
    Select,
    Button,
    List,
    Tag,
    Radio,
    Space,
    Table,
} from "antd";
import {
    PlusOutlined,
    EditOutlined,
    DeleteOutlined,
    SearchOutlined,
} from "@ant-design/icons";

import { MergeRouteComponentProps } from "../../../../router/types";

import {
    userColumns,
    roleColumns,
    apiAclColumns,
    uiAclColumns,
    roleApiAclColumns,
    roleUiAclColumns,
} from "./column";
import {
    fetchAclList,
    fetchRoleAclList,
    fetchRoleList,
    fetchUserList,
} from "../../../../http/user";

interface IProps extends MergeRouteComponentProps {}

const UserDetail: React.FC<IProps> = () => {
    /**
     * 组件状态：当前显示的标签
     */
    const [showTab, setShowTab] = useState("user");

    /**
     * 组件状态：表格列配置（根据标签栏动态变化）
     */
    const [columns, setColumns] = useState<Array<{ [key: string]: any }>>([]);

    /**
     * 组件状态：表格数据
     */
    const [list, setList] = useState([]);

    /**
     * 副作用：监听标签状态变化
     */
    useEffect(() => {
        // 用户
        if (showTab === "user") {
            getUserList();
            setColumns(userColumns);
            return;
        }

        // 角色
        if (showTab === "role") {
            getRoleList();
            setColumns(roleColumns);
            return;
        }

        // 接口权限
        if (showTab === "api_acl") {
            getAclList(2);
            setColumns(apiAclColumns);
            return;
        }

        // 角色与接口权限
        if (showTab === "role_api_acl") {
            getRoleAclList(2);
            setColumns(roleApiAclColumns);
            return;
        }

        // 视图权限
        if (showTab === "ui_acl") {
            getAclList(1);
            setColumns(uiAclColumns);
            return;
        }

        // 角色与视图权限
        if (showTab === "role_ui_acl") {
            getRoleAclList(1);
            setColumns(roleUiAclColumns);
            return;
        }
    }, [showTab]);

    /**
     * 请求数据：获取用户列表
     */
    const getUserList = async () => {
        const res = await fetchUserList();
        res.data.data && setList(res.data.data);
    };

    /**
     * 请求数据：获取角色列表
     */
    const getRoleList = async () => {
        const res = await fetchRoleList();
        res.data.data && setList(res.data.data);
    };

    /**
     * 请求数据：获取权限列表
     */
    const getAclList = async (type: number) => {
        const res = await fetchAclList(type);
        res.data.data && setList(res.data.data);
    };

    /**
     * 请求数据：获取角色权限列表
     */
    const getRoleAclList = async (type: number) => {
        const res = await fetchRoleAclList(type);
        res.data.data && setList(res.data.data);
    };

    return (
        <div className="user-detail">
            {/* 面包屑导航 */}
            <Breadcrumb>
                <Breadcrumb.Item>
                    <a href="">首页</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">用户管理</a>
                </Breadcrumb.Item>

                <Breadcrumb.Item>
                    <a href="">用户详情</a>
                </Breadcrumb.Item>
            </Breadcrumb>

            {/* 操作面板 */}
            <Card>
                {/* 数据 tab 切换 */}
                <Radio.Group
                    value={showTab}
                    onChange={(e) => setShowTab(e.target.value)}
                >
                    <Radio.Button value="user">用户数据</Radio.Button>

                    <Radio.Button value="role">身份数据</Radio.Button>

                    <Radio.Button value="api_acl">api权限</Radio.Button>

                    <Radio.Button value="role_api_acl">
                        身份与api权限
                    </Radio.Button>

                    <Radio.Button value="ui_acl">视图权限</Radio.Button>

                    <Radio.Button value="role_ui_acl">
                        身份与视图权限
                    </Radio.Button>
                </Radio.Group>

                {/* 数据表 */}
                <Table
                    dataSource={list}
                    columns={columns}
                    rowKey={(record: any) =>
                        record.id || record.aid + record.rid
                    }
                />
            </Card>
        </div>
    );
};

export default UserDetail;
